<template>
    <div class="landing-box">
        <!-- 网状背景 -->
        <div class="landing-bg-wrap">
            <div class="bg-Hgrid-box">
                <p class="bg-Hgrid" v-for="index in isCollapse ? 6 : 5" :key="index"></p>
            </div>
            <div class="bg-Vgrid-box">
                <p class="bg-Vgrid" v-for="index in isCollapse ? 2 : 9" :key="index"></p>
            </div>
            <div class="bg-cross-box">
                <p class="bg-cross" v-for="index in isCollapse ? 8 : 14" :key="index"></p>
            </div>
        </div>
        <!-- 标题 -->
        <div class="landing-mainer-wrap">
            <div class="mainer-title">
                <div class="top">Front-end growth Experience</div>
                <div class="bottom">Front-end growth Experience</div>
            </div>
            <div class="mainer-subtitle">
                <div class="top">一个前端的发展历程</div>
                <div class="bottom">一个前端的发展历程</div>
            </div>
        </div>
        <!-- 向下滚动 -->
        <div class="landing-footer-wrap">
            <div class="footer-mousescroll">
                <p>向下滚动</p>
                <p>SCROLL DOWN FOR MORE</p>
            </div>
            <div class="footer-scroll">
                <div class="footer-mouse">
                    <span></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getCurrentInstance, ref, computed, reactive } from 'vue';
export default {
    setup() {
        const { proxy } = getCurrentInstance();

        // 计算属性
        const isCollapse = computed(() => {
            return proxy.$store.state.collapse;
        });

        return { isCollapse };
    }
};
</script>

<style lang="less">
.landing-box {
    height: 100%;
    display: flex;
    align-items: center;

    p {
        margin: 0;
    }
    // 网状背景
    .landing-bg-wrap {
        position: relative;
        width: 100%;

        .bg-Hgrid-box {
            .bg-Hgrid {
                position: absolute;
                background: rgba(255, 255, 255, 0.5);
                width: 100%;
                border-bottom: 1px solid transparent;
            }
        }
        .bg-Vgrid-box {
            .bg-Vgrid {
                position: absolute;
                background: rgba(255, 255, 255, 0.5);
                height: 100%;
                border-right: 1px solid transparent;
            }
        }
        .bg-cross-box {
            @keyframes cross-turn {
                0% {
                    transform: translate(-45%, -45%) rotate(0deg);
                }
                100% {
                    transform: translate(-45%, -45%) rotate(360deg);
                }
            }
            .bg-cross {
                position: absolute;
                transform: translate(-45%, -45%) rotate(0);
                background: rgba(255, 255, 255, 0.5);
                -webkit-clip-path: polygon(
                    50% 0%,
                    61% 35%,
                    98% 35%,
                    68% 57%,
                    79% 91%,
                    50% 70%,
                    21% 91%,
                    32% 57%,
                    2% 35%,
                    39% 35%
                );
                clip-path: polygon(
                    50% 0%,
                    61% 35%,
                    98% 35%,
                    68% 57%,
                    79% 91%,
                    50% 70%,
                    21% 91%,
                    32% 57%,
                    2% 35%,
                    39% 35%
                );
                animation: cross-turn 1s linear infinite;
            }
        }

        // 屏幕大于768px的时候
        @media (min-width: 800px) {
            height: 80%;
            .bg-Hgrid-box {
                @keyframes hgrid-1 {
                    0% {
                        left: 50%;
                        right: 50%;
                        width: 0;
                    }
                    100% {
                        left: 0;
                        right: 0;
                        width: 100%;
                    }
                }
                @keyframes hgrid-2 {
                    0% {
                        left: 37.5%;
                        right: 62.5%;
                        width: 0;
                    }
                    100% {
                        left: 0;
                        right: 0;
                        width: 100%;
                    }
                }
                @keyframes hgrid-3 {
                    0% {
                        left: 75%;
                        right: 25%;
                        width: 0;
                    }
                    100% {
                        left: 0;
                        right: 0;
                        width: 100%;
                    }
                }
                @keyframes hgrid-4 {
                    0% {
                        width: 0;
                    }
                    100% {
                        left: 0;
                        right: 0;
                        width: 100%;
                    }
                }
                .bg-Hgrid {
                    &:first-child {
                        top: 0;
                        border-bottom: 3px solid transparent;
                        animation: hgrid-1 3s linear 1;
                    }
                    &:last-child {
                        bottom: 0;
                        border-bottom: 3px solid transparent;
                        animation: hgrid-1 3s linear 1;
                    }

                    &:nth-child(2) {
                        top: 25%;
                        animation: hgrid-2 3s linear 1;
                    }
                    &:nth-child(3) {
                        top: 50%;
                        animation: hgrid-3 3s linear 1;
                    }
                    &:nth-child(4) {
                        top: 75%;
                        animation: hgrid-4 3s linear 1;
                    }
                }
            }

            .bg-Vgrid-box {
                @keyframes vgrid-25 {
                    0% {
                        top: 25%;
                        bottom: -75%;
                        height: 0%;
                    }
                    100% {
                        top: 0%;
                        bottom: 0;
                        height: 100%;
                    }
                }
                @keyframes vgrid-50 {
                    0% {
                        top: 50%;
                        bottom: -50%;
                        height: 0%;
                    }
                    100% {
                        top: 0%;
                        bottom: 0%;
                        height: 100%;
                    }
                }
                @keyframes vgrid-75 {
                    0% {
                        top: 75%;
                        bottom: -75%;
                        height: 0%;
                    }
                    100% {
                        top: 0%;
                        bottom: 0;
                        height: 100%;
                    }
                }

                .bg-Vgrid {
                    &:first-child {
                        left: 10%;
                        animation: vgrid-50 3s linear 1;
                    }
                    &:nth-child(2) {
                        left: 20%;
                        animation: vgrid-25 3s linear 1;
                    }
                    &:nth-child(3) {
                        left: 30%;
                        animation: vgrid-75 3s linear 1;
                    }
                    &:nth-child(4) {
                        left: 40%;
                        animation: vgrid-25 3s linear 1;
                    }
                    &:nth-child(5) {
                        left: 50%;
                        animation: vgrid-50 3s linear 1;
                    }
                    &:nth-child(6) {
                        left: 60%;
                        animation: vgrid-75 3s linear 1;
                    }
                    &:nth-child(7) {
                        left: 70%;
                        animation: vgrid-25 3s linear 1;
                    }
                    &:nth-child(8) {
                        left: 80%;
                        animation: vgrid-75 3s linear 1;
                    }
                    &:last-child {
                        left: 90%;
                        animation: vgrid-50 3s linear 1;
                    }
                }
            }

            .bg-cross-box {
                .bg-cross {
                    width: 15px;
                    height: 15px;
                }
                .bg-cross {
                    &:first-child {
                        top: 25%;
                        left: 10%;
                    }
                    &:nth-child(2) {
                        top: 75%;
                        left: 10%;
                    }
                    &:nth-child(3) {
                        top: 50%;
                        left: 20%;
                    }
                    &:nth-child(4) {
                        top: 25%;
                        left: 30%;
                    }
                    &:nth-child(5) {
                        top: 75%;
                        left: 30%;
                    }
                    &:nth-child(6) {
                        top: 50%;
                        left: 40%;
                    }
                    &:nth-child(7) {
                        top: 25%;
                        left: 50%;
                    }
                    &:nth-child(8) {
                        top: 75%;
                        left: 50%;
                    }
                    &:nth-child(9) {
                        top: 50%;
                        left: 60%;
                    }
                    &:nth-child(10) {
                        top: 25%;
                        left: 70%;
                    }
                    &:nth-child(11) {
                        top: 75%;
                        left: 70%;
                    }
                    &:nth-child(12) {
                        top: 50%;
                        left: 80%;
                    }
                    &:nth-child(13) {
                        top: 25%;
                        left: 90%;
                    }
                    &:last-child {
                        top: 75%;
                        left: 90%;
                    }
                }
            }
        }

        // 屏幕小于768px时候
        @media (max-width: 800px) {
            height: 75%;
            .bg-Hgrid-box {
                @keyframes hgrid-l0 {
                    0% {
                        width: 0;
                        left: 0;
                    }
                    100% {
                        left: 0;
                        width: 100%;
                    }
                }
                @keyframes hgrid-r0 {
                    0% {
                        width: 0;
                        right: 0;
                    }
                    100% {
                        right: 0;
                        width: 100%;
                    }
                }
                @keyframes hgrid-50 {
                    0% {
                        left: 50%;
                        right: 50%;
                        width: 0;
                    }
                    100% {
                        left: 0;
                        right: 0;
                        width: 100%;
                    }
                }
                @keyframes hgrid-37 {
                    0% {
                        left: 37.5%;
                        right: 62.5%;
                        width: 0;
                    }
                    100% {
                        left: 0;
                        right: 0;
                        width: 100%;
                    }
                }
                @keyframes hgrid-75 {
                    0% {
                        left: 75%;
                        right: 25%;
                        width: 0;
                    }
                    100% {
                        left: 0;
                        right: 0;
                        width: 100%;
                    }
                }
                .bg-Hgrid {
                    &:first-child {
                        top: 0;
                        border-bottom: 3px solid transparent;
                        animation: hgrid-50 3s linear 1;
                    }
                    &:last-child {
                        bottom: 0;
                        border-bottom: 3px solid transparent;
                        animation: hgrid-50 3s linear 1;
                    }

                    &:nth-child(2) {
                        top: 20%;
                        animation: hgrid-75 3s linear 1;
                    }
                    &:nth-child(3) {
                        top: 40%;
                        animation: hgrid-l0 3s linear 1;
                    }
                    &:nth-child(4) {
                        top: 60%;
                        animation: hgrid-r0 3s linear 1;
                    }
                    &:nth-child(5) {
                        top: 80%;
                        animation: hgrid-37 3s linear 1;
                    }
                }
            }

            .bg-Vgrid-box {
                @keyframes vgrid-1 {
                    0% {
                        top: 25%;
                        bottom: -75%;
                        height: 0%;
                    }
                    100% {
                        top: 0%;
                        bottom: 0;
                        height: 100%;
                    }
                }
                @keyframes vgrid-2 {
                    0% {
                        top: 50%;
                        bottom: -50%;
                        height: 0%;
                    }
                    100% {
                        top: 0%;
                        bottom: 0%;
                        height: 100%;
                    }
                }
                .bg-Vgrid {
                    &:first-child {
                        left: 33.33%;
                        animation: vgrid-1 3s linear 1;
                    }

                    &:last-child {
                        left: 66.66%;
                        animation: vgrid-2 3s linear 1;
                    }
                }
            }

            .bg-cross-box {
                .bg-cross {
                    width: 10px;
                    height: 10px;
                    animation: cross-turn 1s linear infinite;
                    &:nth-child(1) {
                        top: 20%;
                        left: 33.33%;
                    }
                    &:nth-child(2) {
                        top: 20%;
                        left: 66.66%;
                    }
                    &:nth-child(3) {
                        top: 40%;
                        left: 33.33%;
                    }
                    &:nth-child(4) {
                        top: 40%;
                        left: 66.66%;
                    }
                    &:nth-child(5) {
                        top: 60%;
                        left: 33.33%;
                    }
                    &:nth-child(6) {
                        top: 60%;
                        left: 66.66%;
                    }
                    &:nth-child(7) {
                        top: 80%;
                        left: 33.33%;
                    }
                    &:nth-child(8) {
                        top: 80%;
                        left: 66.66%;
                    }
                }
            }
        }
    }
    // 标题
    .landing-mainer-wrap {
        .mainer-title {
            font-weight: bold;
            letter-spacing: 2px;
            width: 100%;
            max-width: 700px;
            position: absolute;
            top: 30%;
            left: 50%;
        }
        .mainer-subtitle {
            font-weight: bold;
            letter-spacing: 2px;
            width: 100%;
            max-width: 700px;
            position: absolute;
            top: 40%;
            left: 50%;
        }
        .top {
            position: absolute;
            left: 0;
            top: 0;
            color: #201753;
            -webkit-text-stroke: 1.2px #fff;
        }
        .bottom {
            position: absolute;
            left: -2px;
            top: 0;
            color: #fff;
        }

        // 屏幕大于768px的时候
        @media (min-width: 800px) {
            .mainer-title {
                font-size: 44px;
                transform: translate(-50%, -50%);
            }

            .mainer-subtitle {
                font-size: 36px;
                transform: translate(-50%, -50%);
            }
        }

        @media (max-width: 800px) {
            .mainer-title {
                font-size: 24px;
                transform: translate(-28%, -50%);
            }

            .mainer-subtitle {
                font-size: 20px;
                transform: translate(-28%, -50%);
            }
        }
    }
    // 向下滚动
    .landing-footer-wrap {
        .footer-mousescroll {
            font-weight: bold;
            letter-spacing: 2px;
            position: absolute;
            bottom: 8%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #fff;

            p:first-child {
                font-size: 22px;
                opacity: 0.8;
                margin-bottom: 7px;
                font-weight: 600;
            }
            p:last-child {
                font-size: 14px;
                letter-spacing: 3px;
                text-transform: uppercase;
                padding-bottom: 14px;
                display: inline-block;
                border-bottom: 2px dashed #fff;
            }
        }

        .footer-scroll {
            @keyframes ani-mouse {
                0% {
                    opacity: 1;
                    top: 29%;
                }
                15% {
                    opacity: 1;
                    top: 71%;
                }
                50% {
                    opacity: 0;
                    top: 71%;
                }
                100% {
                    opacity: 0;
                    top: 71%;
                }
            }
            font-weight: bold;
            letter-spacing: 2px;
            position: absolute;
            bottom: -8%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #fff;
            .footer-mouse {
                position: relative;
                display: block;
                width: 30px;
                height: 55px;
                margin: 0 auto 30px;
                box-sizing: border-box;
                border: 2px solid white;
                border-radius: 15px;
                opacity: 0.8;
                &::before {
                    content: '';
                    position: absolute;
                    width: 1px;
                    height: 60px;
                    background: rgba(255, 255, 255, 1);
                    top: 100%;
                    left: 50%;
                    transform: translatex(-50%);
                }
                span {
                    position: absolute;
                    left: 50%;
                    width: 8px;
                    height: 8px;
                    margin: -4px 0 0 -4px;
                    background: #fff;
                    border-radius: 50%;
                    animation: ani-mouse 2.5s linear infinite;
                }
                &::after {
                    content: '';
                    position: absolute;
                    bottom: -130%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 10px;
                    height: 10px;
                    background: #fff;
                    border-radius: 50%;
                }
            }
        }
    }
}
</style>
